<template>
  <div class="person">
    <p>name:{{ name }}</p>
    <p>
    <ul>
      <li v-for="v in list" :key="v.id">
        {{ v.name }} -- {{ v.age }}
      </li>
    </ul>
    </p>
  </div>
</template>

<script lang="ts" setup name="Person">
import { Persons, type PersonInter } from '@/types';


// let person:PersonInter = {id:'dm001',name:'diao mao',age:96}

let personList: Persons = [
  { id: 'dm001', name: 'diao mao1', age: 96 },
  { id: 'dm002', name: 'diao mao2', age: 97 },
  { id: 'dm003', name: 'diao mao3', age: 95 }
]

// 只接收list
// defineProps(['list'])

// 接收list，同时将props保存起来
// let x = defineProps(['list'])
// console.log('@@@@@@@',x.list)

// 接收list + 限制类型
//  defineProps<{list:Persons,name?:string}>()

//  接收list + 限制类型 + 限制必要性 + 指定默认值
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{ id: 'dm001', name: 'diao mao1', age: 96 }]
})
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>